<template>
  <div class="box_1">
    <bigscreen-header headerName="巴林右旗畜产量统计" />

    <div class="w_full h_full-50 flex_row_around p_10 border_box">
      <!-- 1 -->
      <div class="w_48_p h_full bgs_full chart_box_bgi p_10 color_fff">
        <div class="title h_10_p"><span class="mt_20 fw_bold">畜产总产量</span></div>

        <div class="w_full h_90_p">
          <zhu-zhuang-tu-x class="chart" :value="data1" @clickAnimalName="clickChart1AnimalName" />    
        </div>
      </div> 

      <!-- 2 -->
      <div class="w_48_p h_full bgs_full p_5 chart_box_bgi color_fff flex_column_between">
        <div class="w_full h_full  p_10">
          <div class="w_full h_10_p"><span class="mt_20 fw_bold">{{ data2_name }}畜产量详情</span></div>

          <div class="w_full h_90_p">
            <zhu-zhuang-tu class="chart" :value="data2" />
          </div>
        </div>
      </div> 
    </div>
  </div>
</template>

<script>
  import BigscreenHeader from '@/common/header/index.vue';
  import BingTu from '@/components/charts/bing-tu.vue'
  import ZhuZhuangTu from '@/components/charts/zhu-zhuang-tu.vue'
  import ZhuZhuangTuX from '@/components/charts/zhu-zhuang-tu-x.vue'

  export default {
    name: 'XuChanLiang',
    components: { 
      BigscreenHeader,
      BingTu, 
      ZhuZhuangTu,
      ZhuZhuangTuX,
    },
    data() {
      return {
        activeIndex: 0,
        data1: {},
        data2: {},

        data2_name: '肉类',
      }
    },
    mounted() {
      this.hamletName = this.$route.params.val
      setTimeout(() => {
        this.initChart()
      }, 100)
    },
    methods: {
      // 初始化图表
      initChart() {
        this.data1 = {
          unit: '吨',
          x: ['肉类', '禽蛋', '奶类', '毛绒'].reverse(),
          y: [5081.39, 315.92, 436, 352].reverse()
        }

        this.data2 = {
          unit: '头',
          x: ['猪肉', '牛肉', '羊肉', '禽肉'],
          y: [264.89, 1415.61, 2996.58, 129.38]
        }
      },

      clickChart1AnimalName(animal_name) {
        this.data2_name = animal_name
        this.data2 = {}

        this.data3_name = ''
        this.data3 = {}

        if (animal_name == '肉类') {
          this.data2 = {
            unit: '头',
            x: ['猪肉', '牛肉', '羊肉', '禽肉'],
            y: [264.89, 1415.61, 2996.58, 129.38]
          }
        } else if (animal_name == '奶类') {
          this.data2 = {
            unit: '只',
            x: ['牛奶'],
            y: [5544.36]
          }
        }
      }
    }
  }
</script>

<style scoped lang="less">
  @import url('../../assets/css/bigscreen.less');
  .activeColor {color: rgb(13, 246, 94) !important; }

  .content_item_box { width: 33.333333% !important; }
  .left_cover_box { 
    height: 100% !important;

    .title { color: #fff; text-align: center; padding-top: 12px; font-size: 20px; font-weight: 600; }
  }
  .map_cover_box { height: 100% !important; }

  @media screen and (min-width: 1200px) and (max-width: 1399px) {
    
  }
</style>